<template>
  <common-page v-model="height" class="comm-panel-nowrap">
    <template v-slot:header>
      <div class="common-form-control">
        <el-select v-model="queryObj.attr1" placeholder="基准日" style="width:120px;">
          <el-option
            v-for="item in list1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="common-form-control">
        <el-select v-model="queryObj.attr2" placeholder="比对日" style="width:120px;">
          <el-option
            v-for="item in list2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="common-form-control">
        <el-date-picker
          v-model="queryObj.attr3"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width:240px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
        />
      </div>
    </template>
    <div v-loading="loading">
      <nb-table :columns="columns" :data="data" pagination :height="tableHeight" @page-change="page" />
    </div>
  </common-page>
</template>

<script>
import CommonPage from '@/components/CommonPage/index.vue'

export default {
  name: 'ZongtiDuibi',
  components: {
    CommonPage
  },
  data() {
    return {
      loading: false,
      height: 600,
      list1: [],
      list2: [],
      list3: [],
      queryObj: {
        attr1: '',
        attr2: '',
        attr3: ''
      },
      columns: [

        {
          'label': '区/县',
          'field': 'year',
          'width': 180
        },
        {
          'label': '企业名称',
          'field': 'region'
        },
        {
          'label': '基准日排放量kg(12.22) ',
          'field': 'unitName'
        },
        {
          'label': '对比日排放量kg(12.23) ',
          'field': 'amountLastYear'
        },
        {
          'label': '增加排放量',
          'field': 'yield'
        }
      ],
    }
  },
  computed: {
    tableHeight() {
      return this.height - 60
    }
  },
  methods: {
    page({ pageNo }) {
      if (pageNo != undefined) {
        this.queryParams.pageNo = pageNo
      }
      this.fetchList()
    },
    fetchList() {
      this.loading = true
      new Promise((resolve ,reject) => {
        this.loading = false
        resolve()
      })
    }
  }
}
</script>

<style scoped>

</style>
